<script setup lang="ts">
import useComputeForm from '@renderer/composables/useComputeForm'
import handlePopover from '@renderer/utils/handlePopover'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const pageQuery = route.currentRoute.value.query

const columns1 = [
  {
    label: '60*60',
  },
  {
    label: '80*80',
  },
  {
    label: '60*120',
  },
  {
    label: '75*150',
  },
  {
    label: '90*180',
  },
  {
    label: '80*260',
  },
]
const columns2 = [
  {
    label: '16.5*16.5',
  },
  {
    label: '30*30',
  },
  {
    label: '30*60',
  },
  {
    label: '40*40',
  },
  {
    label: '40*80',
  },
  {
    label: '80*80',
  },
  {
    label: '60*120',
  },
  {
    label: '75*150',
  },
  {
    label: '90*180',
  },
  {
    label: '80*260',
  },
]
const columns3 = [
  {
    label: '全房通铺工艺',
  },
  {
    label: '过门石铺贴工艺',
  },
]
const columns4 = [
  {
    label: '水泥砂浆铺贴工艺',
  },
  {
    label: '瓷砖粘接剂铺贴工艺',
  },
]
const columns5 = [
  {
    label: '木制',
  },
  {
    label: '瓷砖',
  },
]
const initileForm = async () => {
  const res = await getFloorGather({
    calculate_id: pageQuery.calculate_id,
    house_number: pageQuery.house_number,
  })
  if (res.length == 0) {
    return
  } else {
    colData.value.map((item) => {
      let infoGet = res.find((item1) => item1.name == item.name)
      if (infoGet) {
        item.value = infoGet.value
      }
    })
  }
}
const colData = ref([
  {
    name: '大地砖',
    value: '80*80',
    col: columns1,
  },
  {
    name: '厨房地砖',
    value: '80*80',
    col: columns2,
  },
  {
    name: '厨房墙砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '卫生间地砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '卫生间墙砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '洗手间地砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '洗手间墙砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '阳台地砖',
    value: '80*80',
    col: columns2,
  },
  {
    name: '阳台墙砖',
    value: '40*80',
    col: columns2,
  },
  {
    name: '大地砖铺贴工艺',
    value: '全房通铺工艺',
    col: columns3,
  },
  {
    name: '墙砖铺贴工艺',
    value: '水泥砂浆铺贴工艺',
    col: columns4,
  },
  {
    name: '踢脚线材质',
    value: '木制',
    col: columns5,
  },
])
defineExpose({
  colData,
})
const { findPopoverContent } = handlePopover()
const { getFloorGather } = useComputeForm()
await initileForm()
</script>

<template>
  <main>
    <el-divider>
      <span class="text-xl">瓷砖数据</span>
    </el-divider>
    <div class="flex flex-col">
      <el-form inline label-position="left" label-width="120">
        <el-row :gutter="20">
          <template v-for="item in colData" :key="index">
            <el-col :span="8">
              <el-form-item>
                <template #label>
                  <span @click="findPopoverContent(item.name)">{{ item.name + ':' }}</span>
                </template>
                <el-select v-model="item.value" placeholder="请选择" style="flex: 1">
                  <el-option
                    v-for="labelItem in item.col"
                    :key="labelItem.label"
                    :label="labelItem.label"
                    :value="labelItem.label" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
    </div>
  </main>
</template>

<style lang="scss" scoped>
.el-form {
  display: flex;
}
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
